<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="__ROOT__/layui/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="__ROOT__/layui/css/public.css" media="all">

</head>
<body>

<div class="layuimini-container" style="width: 80%;float: left">

    <div class="layuimini-main" >
        <div class="right-desc">
            <div class="layui-text desc-item">
                标签管理
            </div>
        </div>
        <div class="page-wrapper" >
            <blockquote class="layui-elem-quote" style="margin: 15px 0;">标签可以新增，修改，删除，搜索。单选或多选后，点击"选好啦"，右侧显示对应符合条件的技术</blockquote>
            <div class="layui-btn-container" style="display: inline-block;">

                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
<!--                <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button>-->

            </div>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>

            </div>
            <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
                   style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#x1006;</i>清除搜索
                </button>
            </div>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-normal">选好啦</button>
            </div>
            <div class="demo-side">
                <table id="demoTreeTb"></table>
            </div>
        </div>

    </div>

</div>
<div class="layuimini-container" style="width: 19%;float: right">
    <div class="layuimini-main" >
        <div class="right-desc">
            <div class="layui-text desc-item">
                对应技术
            </div>
        </div>
    </div>
    <div class="page-wrapper" style="width: 95%;margin-left: 10px" >
        <table class="layui-table" >
            <colgroup>

            </colgroup>
            <thead>
            <tr>
                <th>姓名</th>
                <th>电话</th>
            </tr>
            </thead>
            <tbody id="tr">
<!--            <tr>-->
<!--                <td>贤心</td>-->
<!--                <td>汉族</td>-->
<!--            </tr>-->

            </tbody>
        </table>
    </div>
</div>

<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-badge layui-bg-blue" lay-event="add">添加下级</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script src="__ROOT__/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="__ROOT__/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'util', 'treeTable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var insTb = treeTable.render({
            elem: '#demoTreeTb',
            url: 'http://cs.igoodstudy.com/index.php/admin/Tag/get_tags',
            height: 'full-200',
            tree: {
                iconIndex: 2,
                isPidData: true,
                idName: 'authorityId',
                pidName: 'parentId'
            },
            cols: [
                [
                    {type: 'numbers'},
                    {type: 'checkbox'},
                    {field: 'authorityName', minWidth: 100, title: '标签名称'},
                    {templet: '#auth-state', width: 200, align: 'center', title: '操作'}
                ]
            ],
            style: 'margin-top:0;'
        });
        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });

        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });

        // 搜索
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });
        $('#btnRefresh').click(function () {
            insTb.refresh();
        });

        // 清除搜索
        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });

            // 获取选中
            $('#btnGetChecked').click(function () {
                var names = '';

                JSON.stringify(insTb.checkStatus().map(function (d)
                    {
                        names = names+' '+d.authorityName;
                    })
                    , null, 3) ;
                var url = "{:url('tag/get_developer')}";
                var data={'data':names};

                $.post(url,data,function(result){
                    console.log(result);
                    var html = '';
                    $.each(result, function(i, item) {
                        html = html + '<tr>';
                        html = html + '<td>' + result[i].name+ '</td>';
                        html = html + '<td>' + result[i].phone + '</td>';
                        html = html + '</tr>';
                    });

                    $('#tr').html(html);//通过jquery方式获取table，并把tr,td的html输出到table中
                },'JSON');



            });


        // 工具列点击事件
        treeTable.on('tool(demoTreeTb)', function (obj) {
            var event = obj.event;
            var mdata = obj.data;
            if (event === 'del') {
                layer.confirm('真的要删除该标签吗？', function (index) {
                    var url = "{:url('tag/del')}";
                    var data={'id':mdata.id};
                    var success = "{:url('tag/index')}";
                    //    执行异步请求 ，$.post
                    $.post(url,data,function(result){
                        if(result.status ==0){
                            layer.open({
                                content:result.message,
                                icon:2,
                                title : '错误提示'
                            });

                        }
                        if(result.status ==1){
                            layer.open({
                                content : result.message,
                                icon : 1,
                                yes : function(){
                                    location.href=success;
                                }
                            });

                        }
                    },'JSON');
                    return false;
                });
            }
            else if (event === 'edit') {
                var index = layer.open({
                    title: '修改本标签内容',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['40%', '30%'],
                    content: /index.php/admin/tag/edit?id='+mdata.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
            else if (event === 'add') {
                var index = layer.open({
                    title: '添加下级',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['40%', '30%'],
                    content: '/index.php/admin/tag/add?id='+mdata.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });
        setTimeout(function () {
            insTb.expandAll();
        }, 200); //1s

    });

</script>
</body>
</html>